<template>
<!-- 兑换 -->
	<form @submit="submitSubFun" report-submit='true' class="ASA">
		<view class="payment">
			
			<view class="nav acea-row row-around row-middle">
				<view class="item f10" :class="active==index?'on':''" v-for="(item,index) in navRecharge" :key="index"
					@click="navRecharges(index)">{{item}}</view>
			</view>

			<!-- 余额兑换佣金 -->
			<view class='tip' v-if='!active'>
				<van-cell-group>
					<!-- 可用余额 -->
					<van-field :label="i18n.user_page.integralExchange.t1" :value="currentMoney" readonly />
					<!-- 请输入兑换佣金的数量 -->
					<van-field
						v-model="yue"
						type="digit"
						:placeholder="i18n.user_page.integralExchange.t2"
						placeholder-style="font-size: 12px;"
						:label="i18n.user_page.integralExchange.t3"
					/>
				</van-cell-group>
				<view style="margin: 16px auto; width: 50%;">
						<!-- 提交 -->
						<van-button
							size="small"
							@click="yueToMoney()"
							round
							block
							class="bg-red"
							:disabled="flag1"
						>
							{{i18n.user_page.integralExchange.t10}}
						</van-button>
					</view>
			</view>
			
			<!-- 佣金兑换积分 -->
			<view class="tip" v-if="active == 1">
				<van-cell-group>
					<!-- 可用佣金 -->
					<van-field :label="i18n.user_page.integralExchange.t11" :value="currentCommission" readonly />
					<!-- 请输入兑换积分的数量   兑换佣金-->
					<van-field
						v-model="commission"
						type="digit"
						:placeholder="i18n.user_page.integralExchange.t2"
						:label="i18n.user_page.integralExchange.t20"
					/>
				</van-cell-group>
				<view style="margin: 16px auto; width: 50%;">
					<!-- 提交 -->
					<van-button
						size="small"
						@click="commissionToMoney()"
						round
						block
						class="bg-red"
						:disabled="flag2"
					>
						{{i18n.user_page.integralExchange.t10}}
					</van-button>
				</view>
			</view>

			<!-- 积分兑换余额 -->
			<view class="tip" v-if="active == 2">
				<van-cell-group>
					<!-- 可用积分 -->
					<van-field :label="i18n.user_page.integralExchange.t18" :value="currentIntegral" readonly />
					<!-- 请输入兑换积分的数量   兑换佣金-->
					<van-field
						v-model="integral"
						type="digit"
						:placeholder="i18n.user_page.integralExchange.t19"
						:label="i18n.user_page.integralExchange.t20"
					/>
				</van-cell-group>
				<view style="margin: 16px auto; width: 50%;">
					<!-- 提交 -->
					<van-button
						size="small"
						@click="integralToyue()"
						round
						block
						class="bg-red"
						:disabled="flag3"
					>
						{{i18n.user_page.integralExchange.t10}}
					</van-button>
				</view>
			</view>
		
		</view>
	</form>
</template>

<script>
	import {
		yueToMoney,
		getUserInfo,
		commissionToMoney,
		integralToYue
	} from '@/api/lottery.js';

	import {
		toLogin
	} from '@/libs/login.js';

	export default {
		data() {
			return {
				// navRecharge: ['余额兑换', '佣金兑换'],
				// navRecharge: [this.i18n.user_page.integralExchange.t8, this.i18n.user_page.integralExchange.t9],
				active: 0,
				commission: '', // 兑换积分
				yue: '', // 兑换佣金
				integral: '', // 兑换余额
				currentCommission: 0,  // 可用佣金
				currentMoney: 0, // 可用余额
				currentIntegral: 0, // 可用积分
				flag1: true,
				flag2: true,
				flag3: true,
			}
		},
		onShow: function() {
			this.getUserInfo();
		},
		onLoad(option) {
			if(option.active) {
				this.active = option.active;
			}
		},
		watch: {
			yue(val) {
				if (val != '' && val != null)
					this.flag1 = false;
				else
					this.flag1 = true;
			},
			commission(val) {
				if (val != '' && val != null)
					this.flag2 = false;
				else
					this.flag2 = true;
			},
			integral(val) {
				if (val != '' && val != null)
					this.flag3 = false;
				else
					this.flag3 = true;
			}
		},
		computed: {
			i18n() {
				return this.$t('index')
			},
			navRecharge() {
				return [
					this.i18n.user_page.integralExchange.t15,
					this.i18n.user_page.integralExchange.t16,
					this.i18n.user_page.integralExchange.t17
				] 
			}
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.user_page.integralExchange.title
			});
		},
		methods: {
			navRecharges: function(index) {
				this.active = index;
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					if (res == null || res == undefined || res == "") {
						toLogin();
					}
					that.currentMoney = res.user_score; // 用户可用余额
					that.currentCommission = (res.commission / 100).toFixed(2) // 用户可用佣金
					that.currentIntegral = res.user_money // 用户可用佣金
				}).catch(res => {
					console.log(res);
				});
			},
			// 余额兑换佣金
			yueToMoney() {
				var data = {
					yue: this.yue
				};
				var that = this;
				yueToMoney(data).then(res => {
					if (res == "OK") {
						that.$util.Tips({
							title: this.i18n.user_page.integralExchange.t4 // '兑换成功'
						});
						that.getUserInfo();
						that.yue = '';
					} else {
						that.$util.Tips({
							title: this.i18n.user_page.integralExchange.t5 // '兑换失败'
						});
					}
				})
			},
			// 佣金兑换积分
			commissionToMoney() {
				var data = {
					commission: this.commission
				};
				var that = this;
				commissionToMoney(data).then(res => {
					if (res == "OK") {
						that.$util.Tips({
							title: this.i18n.user_page.integralExchange.t4 //'兑换成功'
						});
						that.getUserInfo();
						that.yue = '';
					} else {
						that.$util.Tips({
							title: this.i18n.user_page.integralExchange.t5 //'兑换失败'
						});
					}
				})
			},
			// 积分兑换余额
			integralToyue() {
				var data = {
					integral: this.integral
				};
				var that = this;
				integralToYue(data).then(res => {
					if (res == "OK") {
						that.$util.Tips({
							title: this.i18n.user_page.integralExchange.t4 //'兑换成功'
						});
						that.getUserInfo();
						that.yue = '';
					} else {
						that.$util.Tips({
							title: this.i18n.user_page.integralExchange.t5 //'兑换失败'
						});
					}
				})
			}
 		}
	}
</script>

<style lang="scss" scoped>
@import "@/common/font.css";
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.payment {
		position: relative;
		top: -60rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		padding-top: 25rpx;
		border-top-right-radius: 39rpx;
		border-top-left-radius: 39rpx;
	}

	.payment .nav {
		margin-top: 30px;
		height: 75rpx;
		line-height: 75rpx;
		padding: 0 30rpx;
	}

	.payment .nav .item {
		font-size: 26rpx;
		color: #333;
	}

	.payment .nav .item.on {
		font-weight: bold;
		border-bottom: 4rpx solid #e83323;
	}

	.payment .input {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px dashed #dddddd;
		margin: 60rpx auto 0 auto;
		padding-bottom: 20rpx;
		font-size: 56rpx;
		color: #333333;
		flex-wrap: nowrap;

	}

	.payment .input text {
		padding-left: 106rpx;
	}

	.payment .input input {
		padding-right: 106rpx;
		width: 300rpx;
		height: 94rpx;
		text-align: center;
		font-size: 70rpx;
	}

	.payment .placeholder {
		color: #d0d0d0;
		height: 100%;
		line-height: 94rpx;
	}

	.payment .tip {
		font-size: 26rpx;
		color: #888888;
		padding: 0 30rpx;
		margin-top: 25rpx;
	}

	.payment .but {
		color: #fff;
		font-size: 30rpx;
		width: 700rpx;
		height: 86rpx;
		border-radius: 50rpx;
		margin: 46rpx auto 0 auto;
		line-height: 86rpx;
	}

	.payment-top {
		width: 100%;
		height: 350rpx;
		background-color: #e83323;

		.name {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-top: -38rpx;
			margin-bottom: 30rpx;
		}

		.pic {
			font-size: 32rpx;
			color: #fff;
		}

		.pic-font {
			font-size: 78rpx;
			color: #fff;
		}
	}

	.picList {
		display: flex;
		flex-wrap: wrap;
		margin: 30rpx 0;

		.pic-box {
			width: 32%;
			height: auto;
			border-radius: 20rpx;
			margin-top: 21rpx;
			padding: 20rpx 0;
			margin-right: 12rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}

		.pic-box-color {
			background-color: #f4f4f4;
			color: #656565;
		}

		.pic-number {
			font-size: 22rpx;
		}

		.pic-number-pic {
			font-size: 38rpx;
			margin-right: 10rpx;
			text-align: center;
		}

	}

	.pic-box-color-active {
		background-color: #ec3323 !important;
		color: #fff !important;
	}

	.tips-box {
		.tips {
			font-size: 28rpx;
			color: #333333;
			font-weight: 800;
			margin-bottom: 14rpx;
			margin-top: 20rpx;
		}

		.tips-samll {
			font-size: 24rpx;
			color: #333333;
			margin-bottom: 14rpx;
		}

		.tip-box {
			margin-top: 30rpx;
		}
	}

	.tips-title {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #333;
	}

	/deep/ .van-cell__title span{
		font-size: 24rpx;
		word-break: break-word;
	}

	input::-webkit-input-placeholder { /* Firefox, Chrome, Opera */ 
		color: #ccc; 
		font-size: 12px;
	} 
	
	input::-ms-input-placeholder { /* Internet Explorer 10-11 */ 
		color: #ccc; 
		font-size: 12px;
	} 
	
	::-ms-input-placeholder { /* Microsoft Edge */ 
		color: #ccc; 
		font-size: 12px;
	} 
	::placeholder{
		// color: red;
	}
	/deep/ .van-field__label{
		width: 9em;
	}
</style>
